<template>
  <div>
    <el-button type="primary" @click="locale='zh'">中文</el-button>
    <el-button type="primary" @click="locale='en'">English</el-button>
    <div class="content">
      {{ t('sayhi') }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      locale: 'zh',
      messages: {
        zh: {
          sayhi: '你好,世界'
        },
        en: {
          sayhi: 'hello World'
        }
      }
    }
  },
  methods: {
    t(str) {
      const dict = this.messages[this.locale]
      return dict[str]
    }
  }
}
</script>

<style>
.content {
  margin-top: 10px;
}
</style>
